<!--
 * @Author       : wfl
 * @LastEditors: qiye
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-02-24 16:08:34
 * @LastEditTime: 2024-02-04 11:44:27
-->
<script lang="ts" setup name="Logo">
import useSettingsStore from '@g/store/modules/settings'
import useUserStore from '@g/store/modules/user'
import useMenuStore from '@/global/store/modules/menu'
import { systemConfig } from '@/system.config'

defineProps({
  showLogo: {
    type: Boolean,
    default: true
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  toggle: {
    type: Boolean,
    default: true
  }
})

const { sysTitle, sysIcon, sysTitleEn } = systemConfig

const { VITE_APP_DOWNLOAD_URL } = import.meta.env
const settingsStore = useSettingsStore()
const userStore = useUserStore()
const menuStore = useMenuStore()
const title = ref(sysTitle || import.meta.env.VITE_APP_TITLE)
const logo = ref(sysIcon ? `/system-config/${sysIcon}` : '')
const tenant = userStore.tenant
const route = useRoute()
const to = computed(() => {
  const rtn: {
    name?: string
    path?: string
    replace?: boolean
  } = {}
  if (settingsStore.settings.home.enable)
    rtn.name = 'home'
  else
    rtn.path = route.path
  return rtn
})

const tenantIconArrange = computed(() => {
  let str = ''
  switch (tenant?.element?.toLocaleUpperCase()) {
    case 'ICON_NAME':
      if (tenant?.arrange?.toLocaleUpperCase() === 'LEFT_ICON_RIGHT_NAME')
        str = 'left'
      else
        str = 'right'
      break
    case 'ICON':
      str = 'icon'
      break
    case 'NAME':
      str = 'name'
      break
  }
  return str
})
const logoUrl = computed(() => {
  let str = ''
  if (!settingsStore.settings.menu.subMenuCollapse)
    str = tenant?.iconOpen || ''
  else
    str = tenant?.iconClose || ''
  str = str ? (VITE_APP_DOWNLOAD_URL + str) : ''
  return str
})

const enableSubMenuCollapseButton = computed(() => {
  return settingsStore.mode === 'mobile' || (
    ['side', 'single', 'head'].includes(settingsStore.settings.menu.menuMode)
    && settingsStore.settings.menu.enableSubMenuCollapseButton
    && !(
      settingsStore.settings.menu.subMenuOnlyOneHide
      && menuStore.sidebarMenus.length === 1
      && (
        !menuStore.sidebarMenus[0].children
        || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
      )
    )
  )
})

const systemTitleStyle = computed(() => {
  const LEN = title.value.length
  // const TWO_LINE = sysTitleEn !== ''
  return {
    fontSize: `${(LEN >= 12 ? 14 : LEN === 11 ? 16 : LEN === 10 ? 18 : LEN === 9 ? 20 : 24)}px`
  }
})

const showCollapse = computed(() => settingsStore.settings.menu.menuMode !== EMenuModel.SIDE)
</script>

<template>
  <div class="title" :class="{ 'is-only-head': settingsStore.settings.menu.menuMode === 'only-head' }">
    <router-link :to="to" :class="{ 'is-link': settingsStore.settings.home.enable }" :title="title">
      <img
        v-if="showLogo && (tenantIconArrange === 'left' || tenantIconArrange === 'icon') && (logoUrl || logo)"
        :src="logoUrl || logo"
        class="logo"
      >
      <div v-if="showTitle && tenantIconArrange !== 'icon' && !settingsStore.settings.menu.subMenuCollapse">
        <p :style="systemTitleStyle">
          {{ title }}
        </p>
        <p v-if="sysTitleEn" :style="systemTitleStyle">
          {{ sysTitleEn }}
        </p>
      </div>

      <img v-if="showLogo && tenantIconArrange === 'right' && (logoUrl || logo)" :src="logoUrl || logo" class="logo">
    </router-link>
    <div
      v-if="enableSubMenuCollapseButton && toggle && showCollapse"
      class="sidebar-collapse"
      :class="{ 'is-collapse': settingsStore.settings.menu.subMenuCollapse }"
      @click="settingsStore.toggleSidebarCollapse()"
    >
      <IkSvgIcon name="icon-shouqi1" :size="16" :show-bg="false" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: inherit;
  padding: 0 10px;
  height: var(--ik-sidebar-logo-height);
  text-align: center;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color);

  &.is-only-head{
    border-bottom-color: transparent;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: inherit;
    overflow: hidden;
    text-decoration: none;
  }

  .is-link {
    cursor: pointer;
  }

  .logo {
    width: 30px;
    height: 30px;
    object-fit: contain;

    &+div {
      margin-left: 8px;
    }
  }

  p {
    display: block;
    font-weight: bold;
    color: var(--ik-main-title-color);
    font-size: 24px;
    text-align-last: justify;
    word-break: keep-all;
  }

  .sidebar-collapse {
    position: absolute;
    right: -14px;
    z-index: 1;
    background: var(--el-bg-color);
    width: 28px;
    height: 28px;
    box-shadow: 0 0 14px 0 #dcdfe6ab;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s;
    font-size: 26px;

    &:hover {
      --ik-main-icon-deep-color: var(--el-color-primary);
      --ik-main-icon-color: var(--ik-main-icon-hover-bg);

      background-color: var(--ik-main-icon-active-color);
    }

    &:hover .el-icon {
      color: var(--el-color-primary);
    }

    &.is-collapse :deep(.el-icon) {
      transform: rotateZ(-180deg);
    }
  }
}

.dark {
  .sidebar-collapse {
    box-shadow: 0 0 14px 0 var(--ik-box-shadow-color);
  }
}

.tenant-left {
  width: var(--ik-sub-sidebar-width);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.tenant-right {
  width: var(--ik-sub-sidebar-width);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.tenant-middle {
  width: var(--ik-sub-sidebar-width);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
